<template>
  <div>
    产品列表
    <el-table :data="pageList" style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column label="图片" width="180" align="center">
        <template #default="scope">
          <div
            class="demo-image__preview"
            style="display: flex; align-items: center"
          >
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.img"
              :zoom-rate="1.2"
              :preview-src-list="[scope.row.img]"
              :initial-index="4"
              fit="cover"
              preview-teleported
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="链接"
        prop="link"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <el-popconfirm
          title="您确定要删除吗?"
          @confirm="handleDelete(scope.$index, scope.row)"
        >
          <template #reference>
            <el-button type="danger">Delete</el-button>
          </template>
        </el-popconfirm>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="5"
      :total="list.length"
      v-model:current-page="page"
    />
  </div>
</template>

<script>
import { getProductList } from "../../service/product";

export default {
  data() {
    return {
      page: 1,
      size: 10,
      list: [],
      total: 0,
    };
  },
  created() {},
  methods: {
    getProductListData() {
      getProductList(this.page, this.size).then((res) => {
        if (res.code === "200") {
          this.list = res.data;
          this.total = res.total;
        }
      });
    },
  },
};
</script>
<style scoped></style>
